<template>
    <view class="box1">
        <div class="box11">
            <input type="text" name="" id="">
            <uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :current="current" field="content">
                <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
                    <swiper-item v-for="(i, index) in imgLi" :key="index">
                        <view class="swiper-item" :class="'swiper-item' + index">
                            <text style="color: #fff; font-size: 32px"><img :src="i.url" alt="" /></text>
                        </view>
                    </swiper-item>
                </swiper>
                <div class="dk">打卡</div>
            </uni-swiper-dot>
        </div>
        <div class="box2">
            <div style="display: flex; width: 100%; justify-content: space-evenly">
                <div class="box21">门票</div>
                <div class="box21">餐饮</div>
                <div class="box21">路线</div>
                <div class="box21">住宿</div>
            </div>
            <div style="display: flex; width: 100%; justify-content: space-evenly">
                <div class="box21">用车</div>
                <div class="box21">商品</div>
                <div class="box21">VIP</div>
                <div class="box21">客服</div>
            </div>
        </div>
        <div style="width: 100vw; height: 34px; display: flex">
            <div
                style="width: 20vw; background-color: rgb(0, 111, 255); height: 100%; line-height: 34px; text-align: center; color: #fff; font-size: 14px">
                资讯>></div>
            <div
                style="width: 80vw; height: 100%; background-color: rgb(228, 228, 228); line-height: 34px; font-size: 12px">
                <div style="margin-left: 20px">相遇值得庆祝，你的真心遗失半路.....</div>
            </div>
        </div>
        <div style="width: 100vw; height: 1700px; overflow: scroll">
            <div
                style="width: 91vw; height: 80px;background-color: rgb(0, 111, 255);border-radius: 13px;margin: 0 auto;margin-top: 20px;color: #fff;text-align: center;line-height: 80px;">
                广告位
            </div>
        </div>
    </view>
</template>

<script setup>
import { ref } from "vue";
const imgLi = [
    { id: 1, url: "/static/1.jpg" },
    { id: 2, url: "/static/2.jpg" },
    { id: 3, url: "/static/3.jpg" },
];
const swiperDotIndex = ref(0);
const current = ref(0);
const change = (e) => {
    current.value = e.detail.current;
};
const clickItem = (e) => {
    swiperDotIndex.value = e;
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.box11 input {
    z-index: 999;
    position: absolute;
    width: 90%;
    border-radius: 25px;
    height: 32px;
    background: rgba(255, 255, 255, 0.498);
}

.box1 {
    position: static;
    left: 15px;
    top: 15px;
    width: 100vw;
    height: 1789px;
    z-index: 0;
}

.box11 {
    height: 25vh;
}

.box2 {
    display: flex;
    width: 100vw;
    height: 15vh;
    flex-wrap: wrap;
}

.box21 {
    border-radius: 10px;
    margin-top: 5%;
    width: 57px;
    height: 24px;
    text-align: center;
    color: #fff;
    background-color: rgb(0, 111, 255);
}

.uni-swiper-dot-box {
    position: absolute;
    width: 100vw;
    height: 25vh;
}

.uni-swiper-dot-box img {
    width: 100vw;
    height: 100%;
}

.dk {
    position: absolute;
    right: 0px;
    top: 50%;
    width: 45px;
    height: 23px;

    background-color: rgb(255, 204, 0);
    border-radius: 10px 0px 0px 10px;
}

.dk {
    line-height: 23px;
    font-family: Arial Normal;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    align-items: center;
    letter-spacing: 0px;
    color: #ffffff;
}

.swiper-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 25vh;
}

.swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #fff;
}

.swiper-item0 {
    background-color: #cee1fd;
}

.swiper-item1 {
    background-color: #b2cef7;
}

.swiper-item2 {
    background-color: #cee1fd;
}

.image {
    width: 750rpx;
}
</style>
